import { useEffect, useState } from 'react'
import styles from './index.module.less'
import { ArrowLeft } from '@react-vant/icons';
import axios from '@/api'
import { useSearchParams, useNavigate } from 'react-router-dom'

export default function NoteDetail() {
  //    get    /findNoteDetailById
  const [searchParams] = useSearchParams()
  const note_id = searchParams.get('id')
  const [noteDetail, setNoteDetail] = useState({})
  const nickname = JSON.parse(localStorage.getItem('userInfo')).nickname
  const navigator = useNavigate()

  useEffect(() => {
    axios.get('/findNoteDetailById?note_id=' + note_id).then(res => {
      console.log(res)
      setNoteDetail(res.data)
    })
  }, [])


  return (
    <div className={styles['note-detail']}>
      <div className={styles['back']} onClick={() => navigator(-1)}>
        <ArrowLeft fontSize={24} />
      </div>

      <div className={styles['note-img']}>
        <img src={noteDetail.note_img} alt="" />
      </div>
      <div className={styles['note-content']}>
        <div className={styles['tab']}>
          <span className={styles['note_type']}>{noteDetail.note_type}</span>
          <span className={styles['author']}>{nickname}</span>
        </div>
        <p className={styles['title']}>{noteDetail.note_title}</p>
        <div className={styles['content']} dangerouslySetInnerHTML={{ __html: noteDetail.note_content }}></div>
      </div>
    </div>
  )
}
